<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('监督检查')"/>
    <th:block th:include="include :: jasny-bootstrap-css"/>
    <style>
        .check-input {
            border: 1px solid #ddd;
            border-radius: 4px;
            background: transparent;
            outline: none;
            height: 30px;
            width: 100%;
            padding-left: 5px;
        }
    </style>
</head>
<body>
<div class="main-content">
    <div class="row">
        <div class="col-sm-12" style="text-align: center; font-size: 20px;">危险源点：
            <span style="color: #ed5565;">
                [[${#strings.defaultString(hazardNames, '无')}]]
            </span>
            <span style="float: right;">
                <button class="btn btn-sm btn-warning" onclick="photograph()" type="button"><i class="fa fa-photo"></i>拍照</button>&nbsp;
            </span>
            <!--            <span class="btn btn-sm btn-success" onclick="sign()">检查签字</span>-->
        </div>

        <div class="form-group">
            <label class="col-sm-2" style="text-align: right; font-size: 20px;">管控措施：</label>
            <div class="col-sm-8">
                <input id="measures" class="form-control" type="text">
            </div>
        </div>

        <div class="col-sm-12">
            <div class="col-sm-12 select-table"></div>
            <div class="form-group">
                <div class="col-sm-8 fileinput fileinput-new" data-provides="fileinput"
                     style="text-align: center; margin-bottom: 0;">
                    <div class="fileinput-preview thumbnail" data-trigger="fileinput"
                         style="width: 600px; height: 300px; margin-right: 10px;"></div>
                    <span class="btn btn-white btn-file">
                        <span class="fileinput-new">选择签字</span>
                        <span class="fileinput-exists">更改</span>
                        <input name="photo" id="photo" type="hidden" value="">
                        <input id="williamYe" accept="image/*" capture="camera" type="file">
                    </span>
                    <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                    <span class="btn btn-white" th:onclick="sign([[${id}]]);">手写签字</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-sm-12" style="display: flex; justify-content: center;">
    <button class="btn btn-sm btn-primary" onclick="submitHandler()" style="margin-right:20px;" type="button"><i
            class="fa fa-check"></i>保 存
    </button>&nbsp;
    <button class="btn btn-sm btn-danger" onclick="closeItem()" type="button"><i class="fa fa-reply-all"></i>关 闭
    </button>
</div>

<div style="padding-bottom: 40px;"></div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: jasny-bootstrap-js"/>
<script th:inline="javascript">
    var prefix = ctx + "control/address";
    var id = [[${id}]];
    var hazardIds = [[${#strings.defaultString(hazardIds, '')}]];
    var hazardNames = [[${#strings.defaultString(hazardNames, '')}]];
    var checkAddress = "";
    var addressId = "";

    $(function () {
        $.get($.common.setURL(prefix + "/getTemplate/" + id), function (res) {
            checkAddress = res.checkAddress;
            addressId = res.addressId;
            const $base = $(".select-table").html(res.template)
                .children("div")
                .css("margin", "auto")
                .css("width", "auto");
            const $table = $base.children("table");
            $table.css("margin", "auto");
            if ($.common.isMobile()) {
                $table.css("width", "96%");
            }
            $table.find("p").css("text-align", "center")
                .find("input[type='checkbox']").css("margin-right", "5px");

            const $p = $base.children("p").has('span');
            $($p[0]).css("color", "#000000");
            $($p[1]).css("text-align", "center");

            $table.find("td").each((key, td) => {
                var str = $(td).find("p").html();
                var value = str.replace(/[^\u4e00-\u9fa5]/gi, "") || str.replace(/[^0-9]/ig, "");
                if (!value) {
                    $(td).html('<input class="check-input" type="text" value=""/></td>')
                }
            })
        })
    });

    function submitHandler() {
        const table = $(".select-table");
        var conditions = "";
        var measures = $("input[id='measures']").val();
        var checkName = $("input[id='photo']").val();
        table.find("input").each((key, dom) => {
            const input = $(dom);
            if (input.hasClass("check-input")) {
                input.parent("td").html("<p style='text-align: center;font-size: 12pt;margin: 5px 0;color: #000000'>" +
                    (input.val() !== "" ? input.val() : "-") +
                    "</p>")
            }

            if (input.attr("type") === "checkbox") {
                if (input.is(":checked")) {
                    var normal = "";
                    if (input.parent().siblings()) {
                        input.parent().siblings().each((key, dom) => {
                            var st = $(dom).html().trim();
                            if (st.indexOf("<input") === -1) {
                                normal += st ? st : "";
                            }
                        });
                    }
                    if (input.parent().siblings().size() === 0) {
                        var str = input.parent().html();
                        normal = str.substring(0, str.indexOf("<input")).trim();
                    }

                    var point_len = normal.indexOf("：");
                    if (point_len >= 0) {
                        normal = normal.substring(0, point_len);
                    }


                    input.attr("checked", 'true');

                    var parentStr = input.parent().html();
                    var begin = parentStr.indexOf('"checked"') + '"checked"'.length + 1;
                    var clickStr = parentStr.substring(begin).trim();
                    var end = clickStr.indexOf("<input");
                    if (end !== -1) {
                        clickStr = clickStr.substring(0, end).trim();
                    }
                    var accident_len = clickStr.indexOf("5px;");
                    if (accident_len >= 0) {
                        clickStr = clickStr.substring(accident_len + '"5px;"'.length).trim();
                    }
                    conditions += normal + "-" + clickStr + "/";
                }
            }
        });
        $.post($.common.setURL("/control/result/add"),
            {
                "addressId": addressId,
                "checkAddress": checkAddress,
                "result": table.html(),
                "conditions": conditions,
                "hazardId": hazardIds,
                "hazardName": hazardNames,
                "measures": measures,
                "checkName": checkName
            },
            function (res) {
                if (res.success) {
                    closeItem();
                }
            });

        //暂停一秒后再执行
        /*setTimeout(function(){
            $.post($.common.setURL("/control/result/add"),
                {
                    "checkAddress": checkAddress,
                    "result": table.html()
                },
                function (res) {
                    if (res.success) {
                        closeItem();
                    }
                });
        },1000);*/
    }

    //拍照
    function photograph() {
        var _height = ($(window).height() - 100);
        var _width = 800;
        //if ($.common.isMobile()) _width = 'auto';
        layer.open({
            type: 2,
            fix: false,
            maxmin: true,
            area: [_width + 'px', _height + 'px'],
            title: "检查情况",
            content: $.common.setURL(prefix + "/photo/" + addressId),
            btn: ['确定', '关闭'],
            yes: function (index, layero) {
                var iframeWin = layero.find('iframe')[0];
                iframeWin.contentWindow.submitHandler(index, layero);
            },
            cancel: function (index) {
                return true;
            }
        });
    }

    //签字盖章
    function sign(id) {
        var _height = 800;
        var _width = 800;
        layer.open({
            type: 2,
            fix: false,
            maxmin: true,
            area: [_width + 'px', _height + 'px'],
            title: "检查签字",
            content: $.common.setURL("/system/message/sign/" + addressId),
            btn: ['关闭'],
            yes: function (index, layero) {
                layer.close(index);
            }
        });
    }

    $('#williamYe').on('change.bs.fileinput ', function (e) {
        // 处理自己的业务
        if (this.files[0]) {
            const formData = new FormData();
            formData.append('file', this.files[0]);
            $.operate.fileUpload(formData, $('input[name="photo"]'));
        } else {
            $('input[name="photo"]').val("");
        }
    });

</script>
</body>
</html>
